<template>
  <div class="project-root">
    <a-row style="width: 100%">
      <a-col :span="4">
        <ProjectList
          :projectList="state.projectList"
          :productId="state.productId"
          :projectId="state.project?.id"
          @reload="reload"
          @reloadModuleList="reloadModuleList"
        />
      </a-col>
      <a-col :span="4">
        <ModuleList
          :moduleList="state.moduleList"
          :project="state.project"
          :moduleId="module?.id"
          @reloadModuleList="reloadModuleList"
          @reloadModuleBuildRun="reloadModuleBuildRun"
        />
      </a-col>
      <a-col :span="16">
        <ModuleContent
          ref="moduleContentRef"
          :logUrl= "state.logUrl"
          :module="module"
          :moduleBuild="state.moduleBuild"
          :moduleRun="state.moduleRun"
          @reloadModuleBuildRun="reloadModuleBuildRun"
        />
      </a-col>
    </a-row>
  </div>
</template>


<script lang="ts">
import ProjectList from "../list/ProjectList.vue";
import ModuleList from "../list/ModuleList.vue";
import ModuleContent from "../list/ModuleContent.vue";
import { defineComponent } from "vue";
import { reactive, ref } from "@vue/reactivity";
import { projectApi, moduleApi } from "@/api/devcloudApi";
import { useRoute } from "vue-router";
import store from "@/store";
import { ProjectListPageVoQueryType } from "@/api/devcloud/ProjectApi";



export default defineComponent({
  name: "project",
  components: {
    ProjectList,
    ModuleList,
    ModuleContent,
  },
  setup(props, ctx) {
    const router = useRoute();
    const moduleContentRef = ref();
    const module = ref()

    const state = reactive({
      projectList: [],
      moduleList: [],
      productId: store.getters.getCurrInfo.productId,
      logUrl: '',
      project: {
        id: undefined,
        name: undefined
      },
      module: {
        id: undefined,
        name: undefined
      },
      moduleBuild: {},
      moduleRun: null,
    });
    

    const query:ProjectListPageVoQueryType = {
      productId: state.productId,
      envId: store.getters.getCurrInfo.envId
    }

    const buildStoreQuery = ()=>{
      query.envId = store.getters.getCurrInfo.envId
      query.productId = store.getters.getCurrInfo.productId
      query.projectId = store.getters.getCurrInfo.projectId
      query.moduleId = store.getters.getCurrInfo.moduleId
    }

    const buildChangeEnvQuery = () => {
      query.envId = store.getters.getCurrInfo.envId
      query.productId = store.getters.getCurrInfo.productId
      query.projectId = undefined
      query.moduleId = undefined
      query.projectName = state.project?.name
      query.moduleName = module.value?.name

    }

    /**
     * 页面查询
     */
    const listProjectData = async () => {
      const res = await projectApi.projectListPageVo(query);
      if (res.success) {
        state.projectList = res.result.projectList;
        state.project = res.result.project
        state.moduleList = res.result.moduleListBuildRun.moduleList;
        let projectId = ''
        let moduleId = ''
        if(res.result.project){
          projectId = res.result.project.id
        }
        if( res.result.moduleListBuildRun.moduleBuildRun.module){
          moduleId =  res.result.moduleListBuildRun.moduleBuildRun.module.id
        }
        setModuleBuildRunResult(res.result.moduleListBuildRun.moduleBuildRun);
        store.commit("setCurrInfo", {projectId: projectId, moduleId: moduleId})
        moduleContentRef.value.configCenterClick()
      }
    }

    const listProjectDataByModuleId = async (moduleId:number) => {
      const res = await projectApi.projectListPageVoByModuleId(moduleId);
      if (res.success) {
        state.projectList = res.result.projectList;
        state.project = res.result.project
        state.moduleList = res.result.moduleListBuildRun.moduleList;
        setModuleBuildRunResult(res.result.moduleListBuildRun.moduleBuildRun);
        state.productId = res.result.project.productId
        store.commit("setCurrInfo", {productId: res.result.project.productId ,envId: res.result.project.envId,projectId: res.result.project.id, moduleId: res.result.moduleListBuildRun.moduleBuildRun.module.id})
        moduleContentRef.value.configCenterClick()
      }
    }


    store.watch((state, getters)=>{
      return getters.isFlush
    }, (newVal:string|number, oldVal:string)=>{
      if(!newVal){
        return
      }
      if(typeof newVal === 'string'){
        if(newVal==='jump'){
          listProjectData()
        }else if(newVal.startsWith('env-')){
          buildChangeEnvQuery()
          listProjectData()
        }
      }else{
        listProjectDataByModuleId(newVal)
      }
    })

    /**
     * 获取模块列表信息
     */
    const listModuleData = async (projectItem: any, moduleId?: number) => {
      const res = await moduleApi.moduleListBuildRunPageVo(projectItem.id, moduleId);
      if (res.success) {
        state.moduleList = res.result.moduleList;
        setModuleBuildRunResult(res.result.moduleBuildRun);
        state.project = projectItem
        module.value =  res.result.moduleBuildRun.module
        store.commit("setCurrInfo", {projectId: projectItem.id, moduleId: res.result.moduleBuildRun.module?.id})
      }
    }

    /**
     * 获取模块构建运行信息
     */
    const getModuleBuildRun = async (moduleId: number) => {
      const res = await moduleApi.moduleBuildRunPageVo(moduleId);
      if (res.success) {
        setModuleBuildRunResult(res.result);
        store.commit("setCurrInfo", {moduleId: moduleId})
      }
    }

    /**
     * 设置接口返回模块构建运行信息
     */
    const setModuleBuildRunResult = (moduleBuildRun: any) => {
      module.value = moduleBuildRun.module;
      state.logUrl = moduleBuildRun.logUrl
      const moduleBuild = moduleBuildRun.moduleBuild;
      if (!moduleBuild) {
        state.moduleBuild = {
          moduleId: moduleBuildRun.module?.id,
        }
      } else {
        state.moduleBuild = moduleBuild;
      }
      state.moduleRun = moduleBuildRun.moduleRun;
    }

    /**
     * 重写加载模块构建运行信息
     */
    const reloadModuleBuildRun = (moduleId: number) => {
      moduleContentRef.value.changeActive("1");
      getModuleBuildRun(moduleId);
    }

    /**
     * 重新加载模块列表信息
     */
    const reloadModuleList = (projectItem: any, moduleId?: number) => {
      moduleContentRef.value.changeActive("1");
      listModuleData(projectItem, moduleId);
    }

    /**
     * 重新加载项目信息
     */
    const reload = () => {
      moduleContentRef.value.changeActive("1");
      buildStoreQuery()
      listProjectData();
    }

    
    buildStoreQuery()
    listProjectData()

    return {
      state,
      module,
      moduleContentRef,
      reload,
      reloadModuleList,
      reloadModuleBuildRun,
    }
  },
});
</script>
<style lang="less" scoped>
.project-root {
  .project-list {
    height: 100%;
    border-right: 1px solid rgba(175, 162, 162, 0.4);
  }

  .module-list {
    height: 100%;
    min-height: calc(100vh - 61px);
    overflow-y: auto;
    border-right: 1px solid rgba(175, 162, 162, 0.4);
  }

  .module-content {
    height: 100%;
  }
  .ant-spin-container {
    height: 80vh;
    overflow-y: auto;
    border: none !important;
    padding-bottom: 70px !important;
  }
}
</style>
<style lang="less">
.project-root {

  .ant-spin-container::-webkit-scrollbar {
    display: none;
  }
}
</style>
